<template>
  <view class="page-wrapper">
    <view class="block"></view>
    <view class="content">
      <view class="name-wrapper">
        <view class="l-name">
          {{detail.reasonForReporting}}
        </view>
        <view class="r-time">{{formatters(detail.updateTime, "YY/MM/DD HH:mm")}}</view>
      </view>
      <u-line color="#F3F3F3" margin="0 0 23rpx 0"></u-line>

      <view class="list-item">
        <view class="item-label">
          <view class="item-label-inner">
            印刷时间
          </view>
          <view class="label-colon">
            :
          </view>
        </view>
        <view class="item-content">
          {{ formatters(detail.printTime, "YY/MM/DD HH:mm")}}
        </view>
      </view>
      <view class="list-item">
        <view class="item-label">
          <view class="item-label-inner">
            印刷数量
          </view>
          <view class="label-colon">
            :
          </view>
        </view>
        <view class="item-content">
          {{detail.printSum}}份
        </view>
      </view>
      <view class="list-item">
        <view class="item-label">
          <view class="item-label-inner">
            印刷人员
          </view>
          <view class="label-colon">
            :
          </view>
        </view>
        <view class="item-content">
          {{detail.printName ? detail.printName : '--'}}
        </view>
      </view>
      <view class="list-item">
        <view class="item-label">
          <view class="item-label-inner">
            联系电话
          </view>
          <view class="label-colon">
            :
          </view>
        </view>
        <view class="item-content">
          {{detail.printPhone ? detail.printPhone : '--'}}
        </view>
      </view>
      <view class="list-item">
        <view class="item-label">
          <view class="item-label-inner">
            图片
          </view>
          <view class="label-colon">
            :
          </view>
        </view>
        <view class="item-content">
          <view class="img-wrapper" v-if="detail.imageListUrl">
            <image class="img" v-for="(item, index) in detail.imageListUrl" :key="index" :src="`${imgPrefix}${item}`"
              @click="previewImage(detail.imageListUrl)">
            </image>
          </view>
        </view>
      </view>
      <view class="list-item">
        <view class="item-label">
          <view class="item-label-inner">
            备注信息
          </view>
          <view class="label-colon">
            :
          </view>
        </view>
        <view class="item-content">
          {{detail.remark}}
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import {
    formatters
  } from '@/utils/util.js'
  export default {
    data() {
      return {
        imgPrefix: uni.getStorageSync("imgPrefix"),
        detail: {}
      }
    },
    onLoad(options) {
      const detail = JSON.parse(decodeURIComponent(options.params));
      this.detail = detail
    },
    methods: {
      formatters,
      previewImage(imgUrl) {
        uni.previewImage({
          urls: imgUrl.map((item) => {
            return `${this.imgPrefix}${item}`
          })
        })
      }
    }
  }
</script>

<style>
  page {
    background: #F9F9F9;
  }
</style>
<style lang="scss" scoped>
  .page-wrapper {
    .block {
      width: 732rpx;
      height: 272rpx;
      background: linear-gradient(180deg, #51B1FF 0%, #1790F2 100%);
      border-radius: 0rpx 0rpx 52rpx 52rpx;
      margin: 0 auto;
    }

    .content {
      width: 702rpx;
      background: #FFFFFF;
      border-radius: 16rpx 16rpx 16rpx 16rpx;
      margin: 0 auto;
      margin-top: -197rpx;
      padding: 25rpx 33rpx;

      .name-wrapper {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 86rpx;

        .l-name {
          font-weight: bold;
          font-size: 32rpx;
          color: #181818;
        }

        .r-time {
          font-weight: 400;
          font-size: 26rpx;
          color: #999999;
        }
      }

      .car {
        font-weight: bold;
        font-size: 36rpx;
        color: #000000;
        line-height: 40rpx;
        margin-bottom: 16rpx;
      }



      .solid {
        width: 653rpx;
        height: 0rpx;
        border: 1rpx dotted #D2D2D2;
        margin-bottom: 16rpx;
      }

      .img-wrapper {
        margin-top: 20rpx;

        .img {
          width: 160rpx;
          height: 142rpx;
          border-radius: 8rpx 8rpx 8rpx 8rpx;
          margin-right: 16rpx;

          &:nth-child(3n) {
            margin-right: 0;
          }
        }
      }
    }

    .list-item {
      margin-bottom: 16rpx;
      display: flex;

      .item-label {
        font-weight: 500;
        font-size: 26rpx;
        color: #999999;
        flex-shrink: 0;
        margin-right: 7rpx;
        display: flex;

        .item-label-inner {
          width: 112rpx;
          text-align: justify;
          text-align-last: justify;
        }
      }

      .item-content {
        font-weight: bold;
        font-size: 28rpx;
        color: #545454;
      }
    }

    .take-wrapper {
      background: #FFFFFF;
      border-radius: 16rpx 16rpx 16rpx 16rpx;
      padding: 25rpx 33rpx;
      width: 702rpx;
      margin: 0 auto;
      margin-top: 10rpx;
    }
  }
</style>